<template>
	<z-paging ref="paging" :default-page-size="6" :refresher-enabled="false" @query="queryList">
		<view class="InformationNavBar">
			<uni-easyinput clas prefixIcon="search" v-model="value" placeholder="请输入搜索的内容">
			</uni-easyinput>
			<button class="searchBtn">搜索</button>
		</view>
		<!-- 列表内容 -->
		<view class="list-container">
			<view v-for="(item, index) in dataList" :key="index" class="list-item">
				<uni-card :is-shadow="false" @click="selectThis(item.title)">
					<view class="uni-body">
						<view class="list-item-top">
							<text class="list-item-title">{{item.title}}</text>
							<image class="list-item-img" :src="formatImageUrl(item.coverImage)">
							</image>
						</view>

						<view class="list-item-center">
							<image class="img-icon" src="../../static/images/author.png"></image>{{item.author}}
						</view>
						<view class="list-item-bottom">
							<view>
								<image class="img-icon" src="../../static/images/category.png"></image>
								<text>{{item.subjectCategory}}</text>
							</view>
							<view>
								<image class="img-icon" src="../../static/images/date.png"></image>
								<text>{{item.publishDate}}</text>
							</view>
						</view>

					</view>
				</uni-card>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		GetKnowledgePointList
	} from "@/api/knowledge_point.js";
	import config from "@/config.js";
	export default {
		data() {
			return {
				value: "",
				dataList: [],
			};
		},
		methods: {
			async queryList(pageNum, pageSize) {
				const params = {
					pageNum: pageNum,
					pageSize: pageSize,
				};

				const response = await GetKnowledgePointList(params);
				const list = response.rows || response.data || [];
				const total = response.total || 0;

				if (pageNum === 1) {
					this.dataList = list;
				} else {
					this.dataList = [...this.dataList, ...list];
				}
				this.$refs.paging.completeByTotal(list, total, true);
			},
			onClick(e) {
				console.log(e)
			},
			formatImageUrl(url) {
				if (!url) return "";
				if (/^https?:\/\//i.test(url)) return url;
				const base =
					(config && config.baseUrl) || process.env.VUE_APP_BASE_API || "";
				return url.startsWith("/") ? base + url : `${base}/${url}`;
			},
			selectThis(title){
				console.log("跳转"+title+"的详情页面")
			}

		},
	};
</script>

<style lang="less" scoped>
	.work-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.InformationNavBar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20rpx;

		.searchBtn {
			height: 75rpx;
			font-size: 28rpx;
			line-height: 75rpx;
			background-color: #007aff;
			color: white;
			border-radius: 10rpx;
			padding: 0 30rpx;
		}
	}

	.list-container {
		.list-item {
			.list-item-top {
				display: flex;
				justify-content: space-between;

				.list-item-title {
					font-size: 35rpx;
					color: black;
				}

				.list-item-img {
					width: 250rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.list-item-center {
				position: relative;
				top: -150rpx;
			}

			.list-item-bottom {
				color: #7e7e7e;
				margin-top: -85rpx;
				display: flex;
				justify-content: space-around;
				margin-left: -70rpx;
				margin-right: 200rpx;
			}
		}
	}

	.img-icon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	/deep/ .uni-card {
		width: 100% !important;
		margin: 0 !important;
		margin-bottom: 8rpx !important;
	}

	/deep/ .uni-card__content {
		width: 100% !important;
	}
</style>